<template>
    <div v-if="this.lotData != null" ref="lotOverview">
        <!-- 历史开奖 -->
        <div class="flex-bap bg-c-lr tx-s-14">
            <div class="past-issue">{{ lotData.openResult.issue }}期</div>
            <!-- 其他彩种 -->
            <div class="flex-box" v-if="$store.state.lotType.indexOf('lhc') < 0"> 
                <div class="circle-min circle-R" v-for="(num, i) in lotData.openResult.number.split(',')" :key="i">{{ num }}</div>
            </div>
            <!-- 六合彩 -->
            <div class="flex-box" v-else>
                <div class="flex-bap" v-for="(num, i) in lotData.openResult.haoma" :key="i">
                    <div class="circle-min" :class="[ colorCir[num.color] ]">{{ num.number }}</div>
                    <div v-if="i == 5" class="tx-c-222 mar-r-5">+</div>
                </div>
            </div>
        </div> 
        <!-- 期数、倒计时、余额 -->
        <div class="flex-box flex-ac flex-pa">
            <div class="flex-box flex-ac">
                <div class="iconSize-125 icon_clock"></div>
                <div class="pad-lr">{{ lotData.countDown.issue }}期
                    <span v-show="$store.state.lotStatus == 1">封盘</span>
                </div>
                <div class="tx-c-r">{{ count }}</div>
            </div>
            <div class="flex-box flex-ac" v-if="lotData">
                余额：<span class="tx-c-r">{{ lotData.balance }}</span>
            </div>
        </div>
    </div> 
</template>

<script type="text/ecmascript-6">
import 'common/css/lottery.css'
import { mapGetters } from 'vuex'
import { deadAwar } from '../../common/js/axiosUtil'
export default {
    data () {
        return {
            count : '', // 倒计时时间
            timer : null, // 定时器 倒计时
            refreshT : null, // 定时器 刷新
            colorCir : {
                R : 'circle-R', B : 'circle-B', G : 'circle-G'
            }
        }
    },
    created () {
        this.getData()
        // 防止重复刷新
        this.$store.state.refreshS = false
    },
    methods : { 
        // 获取彩票数据
        getData () {
            let params = new URLSearchParams()
            const token = this.$token()
            params.append('timeStamp', token[0])
            params.append('token', token[1])
            params.append('uid', this.$store.state.bfUserInfo.uid) 
            params.append('type', this.$store.state.lotType)
            deadAwar(params)
            .then((response)=> {
                if(response.data.code == "200"){ 
                    let data = response.data.data 
                    this.$store.state.lotData = data
                    this.$store.state.lotOdds = data.oddsData
                    const {status} = data.countDown
                    if(status == 1){ // 可购买
                        this.countDownTimer(data.countDown.countDown)
                    }else if(status == 0){ // 已封盘
                        this.count = '已封盘'
                    }else if(status == -1){ // 已关盘
                        this.count = '已关盘'
                    }
                    // 更新store中lotStatus状态，若当前为已封盘则开始倒计时准备刷新数据
                    this.refresh(status, data.countDown.countDown)
                } else {
                    this.$logAgain(response.data.msg)
                }
            })
            .catch((error)=> {
                this.$toast('请求服务失败', 2000)
            })
        },
        // 倒计时
        countDownTimer (time) {
            let h = 0
            let m = 0
            let s = 0
            const {lotType} = this.$store.state
            h = Math.floor(time / 60 / 60 % 24)
            h < 10 && (h = "0" + h)
            m = Math.floor(time / 60 % 60)
            m < 10 && (m = "0" + m)
            s = Math.floor(time % 60)
            s < 10 && (s = "0" + s)
            this.count = lotType.indexOf('lhc') > -1 ? h + ":" + m + ":" + s : m + ":" + s 
            if (!this.timer) {
                this.timer = window.setInterval(() => {
                    if (h != 0 || s != 0 || m != 0) {
                        s--
                        s < 10 && (s = "0" + s)
                        if (s.length >= 3) {
                            m = Number(m) - 1
                            m < 10 && (m = "0" + m)
                            s = 59
                        }
                        if (m.length >= 3) {
                            h = Number(h) - 1
                            h < 10 && (h = "0" + h)
                            m = 59
                        }
                        if (h.length >= 3) {
                            h = "00"
                            m = "00"
                            s = "00"
                        }
                        this.count = lotType.indexOf('lhc') > -1 ? h + ":" + m + ":" + s : m + ":" + s
                    } else {
                        // 封盘后切换界面显示
                        this.count = '已封盘'
                        // 清除计时器
                        window.clearInterval(this.timer)
                        this.timer = null
                        // 封盘后开始倒计时刷新数据
                        this.refresh(0, this.lotData.countDown.closeDuration)
                    }
                }, 1000)
            }
        },
        refresh (status, time) {
            // 更新store中lotStatus状态
            this.$store.state.lotStatus = status
            // 若当前为已封盘则开始倒计时准备刷新数据
            if(status != 1 && typeof(time) == 'number'){
                this.$store.state.refreshS = true
                let _this = this
                this.refreshT = setTimeout(() => {
                    if(_this.$store.state.refreshS){
                        // 防止重复刷新
                        _this.$store.state.refreshS = false
                        // 刷新彩票数据
                        _this.getData()
                    }
                }, (time) * 1000)
            }
        }
    },
    destroyed () {
        // 清除计时器
        window.clearInterval(this.timer)
        // 防止重复刷新
        this.$store.state.refreshS = false
    },
    computed: {
        ...mapGetters([
            'lotData'
        ])
    }
}
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
    .pad-lr
        padding : 0.625rem 0.375rem 
    .past-issue
        padding : .75rem .75rem .75rem 0
</style>